<template>
    <div class="chat-field-box">
        <div class="chat-top-bar">
            <p>srcUid: {{ props.srcUid }} username: {{ username }}</p>

        </div>
        <div class="chat-field">
            <ul>
                <li v-for="(msg, index) in chatStore.chatMap.get(props.srcUid)" :key="index">
                    <chatMessageBox :message="msg" />
                </li>
            </ul>
        </div>
        <div class="input-field">
            input-field
        </div>

    </div>
</template>

<script setup lang="ts">
    import defaultAvatar from '@/assets/images/default_avatar.jpeg'
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    import { useChatStore } from '@/store/useChatStore'
    import { defineProps, ref, onMounted, watchEffect, computed } from 'vue'
    import { getUsersInfoByUID } from '@/api/user'
    import chatMessageBox from './chatMessageBox.vue'
    const loginUserStore = useLoginUserStore()
    const chatStore = useChatStore()


    const props = defineProps(['srcUid'])
    const username = ref(''), nickname = ref(''), avatar_path = ref('')
    const fetchUID = async () => {
        const res = await getUsersInfoByUID({ uid: props.srcUid })
        if (res.data.code === 0) {
            username.value = res.data.data.username
            nickname.value = res.data.data.nickname
            avatar_path.value = res.data.data.avatar_path
        } else {
            console.log(res.data.msg, 'srcUid:', props.srcUid)
        }
    }

    const srcAvatar = computed(() => {
        try {
            // 动态导入用户头像
            if (avatar_path.value)
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                return ((window as any).APP_CONFIG?.API_BASE_URL || '') + avatar_path.value
            return defaultAvatar
        } catch (err) {
            console.error('头像加载失败:', err)
            return defaultAvatar // 加载失败时显示默认头像
        }

    })

    watchEffect(() => {
        fetchUID()
    })
    onMounted(() => {
        fetchUID()

    })

</script>

<style lang="less" scoped>
    * {
        padding: 0;
        margin: 0;
        line-height: 1;
    }

    .chat-field-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: ;

        .chat-top-bar {
            width: 100%;
            height: 30px;
            background-color: #f4a1a1;

            p {
                line-height: 30px;
            }
        }

        .chat-field {
            // margin-top: 70px;
            // margin-bottom: 20px;
            // position: fixed;
            width: 100%;
            // height: 100%;
            flex: 2;
            white-space: normal;
            overflow-y: auto;
            left: 0;
            background: rgba(0, 0, 0, 0);

        }

        .input-field {
            width: 100%;
            // height: 120px;
            flex: 1;
            background-color: #c61616;
            // text-align: center;

        }
    }
</style>